본문으로 건너뛰기

Yarn Workspace로 시작하기

📋 프로젝트 구조​

ReactNative_Synapse/
├── .git/                    # Git 저장소
├── .gitignore
├── .gitattributes  
├── package.json             # 루트 package.json (yarn workspace 설정)
├── apps/
│   └── mobile/              # TypeScript React Native 앱
│       ├── App.tsx          # TypeScript 메인 파일
│       ├── tsconfig.json    # TypeScript 설정
│       ├── ios/             # iOS 네이티브 코드
│       └── android/         # Android 네이티브 코드
└── node_modules/

설치 과정​

1. 프로젝트 생성​

mkdir ReactNative_Synapse
cd ReactNative_Synapse

루트 package.json 생성

{
  "name": "synapse-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "apps/*"
  ],
  "scripts": {
    "ios": "yarn workspace mobile ios",
    "android": "yarn workspace mobile android",
    "start": "yarn workspace mobile start",
    "web": "yarn workspace mobile web"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "typescript": "^5.0.0"
  }
}

2. React Native 프로젝트 생성​

절대 템플릿을 사용하지 말 것. 오류남

cd apps/mobile
npx --yes @react-native-community/cli@latest init mobile

3. iOS 설정​

cd mobile/ios
bundle install
bundle exec pod install

4. 앱 실행​

cd ../../..  # 루트 디렉토리로 이동
yarn ios     # iOS 앱 실행

5. 메트로 설정 변경​

// apps/mobileApp/metro.config.js
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const path = require('path');

/**
 * Metro configuration
 * <https://reactnative.dev/docs/metro>
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    unstable_enableSymlinks: true, // this enable the use of Symlinks
  },
  // this specifies the folder where are located the node_modules for the project
  watchFolders: [path.join(__dirname, '..', '..')],
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);